<template>
  <div>
    <m-header :title="iNowTitle" :to="to" :isRight="false" :isBack="true"></m-header>
    <div v-if="status == null" class="" style="display: block;">
      <div class="account">
        <div class="account_form">
          <div class="account_line">
            <div class="account_title">真实姓名</div>
            <div class="account_input">
              <input class="input_select" type="text" name="certName" placeholder="请填写认证人姓名" v-model="user.certName"
                     v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('certName') }"/>
            </div>
          </div>
          <p class="err_msg"><span v-show="errors.has('certName')" class="help is-danger">{{ errors.first('certName')
            }}</span></p>
          <div class="account_line">
            <div class="account_title">身份证号码</div>
            <div class="account_input">
              <input id="certNo" class="input_select" type="text" name="certNo" placeholder="请输入身份证号"
                     v-model="user.certNo" v-validate="'required|cardNumb'"
                     :class="{'input': true, 'is-danger': errors.has('certNo') }"/>
            </div>
          </div>
          <p class="err_msg"><span v-show="errors.has('certNo')"
                                   class="help is-danger">{{ errors.first('certNo') }}</span></p>
        </div>
        <div class="tips">
          <p>*认证信息请与本人支付宝保存一致，否则会认证失败</p>
        </div>
      </div>
      <div class="btn_big bind_big_btn" @click="zmOAuth">开始认证</div>
    </div>
    <!-- 认证失败 开始 -->

    <section v-if="status == '2'"  class="bind_card_success pd_t60">
      <img class="error_img" src="./error_ytt.png" alt="">
      <p class="success_desc">对不起，您认证失败</p>
      <p class="success_desc success_numb" v-html="error"></p>
      <!--<p class="success_text" v-if="nubm">您还剩下{{nubm}}次机会</p>-->

      <router-link to="/individualAttst" tag="a" class="btn_big">我要使用证件认证</router-link>
    </section>

    <!-- 认证失败 结束 -->
    <!-- 认证失败 开始 -->
    <section v-if="status == '1' || status == '3'" class="bind_card_success pd_t60">
      <img class="error_img" src="./error_ytt.png" alt="">
      <p class="success_desc" v-html="error"></p>
      <!--<a href="personal_attst.html" class="btn_big">我要使用证件认证</a>-->
      <p class="success_text" v-if="nubm">您还剩下{{nubm}}次机会</p>
      <a href="javascript:;" onclick="window.location.reload();" class="btn_big">重新认证</a>
    </section>
    <!-- 认证失败 结束 -->
    <!-- 认证成功 开始 -->
    <section v-if="status == '1000'"  class="bind_card_success pd_t60">
      <img class="success_img" src="./icon_success.png" alt="">
      <p class="success_desc">恭喜您，认证成功</p>
      <p class="success_text">您的应用可以正式上线商用了</p>
      <router-link to="/main" tag="a" class="btn_big">返回云核空间</router-link>
    </section>
    <!-- 认证成功 结束 -->
  </div>

</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK,} from "../../config/config"
  import {isWx} from "common/js/util"
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        iNowTitle: '填写认证信息',
        to:'/accountSelect',
        user: {
          certName: '',
          certNo: ''
        },
        busNo: '',
        status:null,
        error:'',
        nubm:null,
        interval:null
      }
    },
    methods: {
      zmOAuth() {
        this.$validator.validateAll({
          certName: this.user.certName,
          certNo: this.user.certNo
        }).then((result) => {
          if (!result) {
            return
          }
          return this.$http({
            url: '/mobile/api/v1.0/user/oAuthZmrz',
            method: 'post',
            data: this.user
          })
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            if(isWx()){
              window.alert('因支付宝接口被微信禁止，请用浏览器打开登录继续认证');
            }
            this.busNo = res.data.data.busNo;
            this.status = res.data.code;
            this.interval = window.setInterval(()=>{
              this.getOAuthStatus();
            },3000)
            window.location.href = res.data.data.zmrzUrl;
          } else if (res.data.code == '1') {
            // 表示认证失败，认证次数过多

            this.status = res.data.code;
            this.error = res.data.msg;
            return
          }else if (res.data.code == '3') {
            // 表示认证失败，认证次数过多

            this.status = res.data.code;
            this.error = res.data.msg;
            return
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      getOAuthStatus(){
        this.$http({
          url: '/mobile/api/v1.0/user/getOAuthStatus',
          method: 'post',
          data: {
            busNo:this.busNo
          },
        }).then((res)=>{
          if(res.data.code == ERR_OK){
            //认证成功
            this.status = '1000';
            window.clearInterval(this.interval);
          }else if(res.data.code == '2'){
            //认证失败，3次机会已用完
            this.error = res.data.msg;
            this.status = '2';
            this.nubm = null;
            window.clearInterval(this.interval);
          }else if(res.data.code == '3'){
            //认证失败，并返回剩余次数
            this.error = res.data.msg;
            this.status = '3';
            this.nubm = res.data.data.ramaintimes;
            window.clearInterval(this.interval);
          }
        }).catch((err)=>{
          console.log(err)
        })
      }
    },
    components: {
      MHeader
    }
  }
</script>

<style lang="less" rel="stylesheet/less">

</style>
